<template>
<div class="cart-container">
  <div class="goods-list">

      <!-- 商品列表项区域 -->
   <div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
	 <div class="mui-card-content">
	   <div class="mui-card-content-inner">
						
            <mt-switch 
              v-model="$store.getters.getGoodsSelected[item.id]"
              @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
             <img :src="item.thumb_path">
            <div class="info">
              
             
              <h1>{{ item.title }}</h1>
              <p>
                <span class="price">￥{{ item.price }}</span>
                <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                <!-- 问题：如何从购物车中获取商品的数量呢 -->
                <!-- 1. 我们可以先创建一个 空对象，然后循环购物车中所有商品的数据， 把 当前循环这条商品的 Id， 作为 对象 的 属性名，count值作为 对象的 属性值，这样，当把所有的商品循环一遍，就会得到一个对象： { 88: 2, 89: 1, 90: 4 } -->
                <a href="#" @click.prevent="remove(item.id, i)">删除</a>
              </p>
            </div>

		   </div>
	    </div>
     </div>
  </div>

    <!-- 结算区域 -->
    <div class="mui-card">
	  <div class="mui-card-content">
		<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计（不含运费）</p>
              <p>已勾选商品 <span class="red">{{ $store.getters.getGoodsCountAndAmount.count }}</span> 件， 总价 <span class="red">￥{{ $store.getters.getGoodsCountAndAmount.amount }}</span></p>
            </div>
             <mt-button type="danger">去结算</mt-button>
		</div>
	  </div>
	</div>



      <p>{{ $store.getters.getGoodsSelected }}</p>
 </div>



   
</template>

<script>

//引入商品数量加减组件
import numbox from "../subcompoments/shopcar_numbox.vue"
export default {
  data() {
    return {
      goodslist: [] // 购物车中所有商品的数据
    };
  },
    created(){
        this.getGoodsList();
    },
    methods:{
        // getGoodsList(){
        //     var idArr = [];
        //     this.$store.state.car.forEach(item => {
        //         idArr.push(item.id);
        //     });
        // if (idArr.length <= 0){
        //     return;
        // }

        // this.$http.get("api/goods/getshopcarlist/" + idArr.join(","))
        //           .then(result=>{
        //               this.goodslist = result.body.message;
        //           })  

        // },
        getGoodsList(){
        //     id:this.id,
        
        // count:this.selectedCount,
        // price:this.goodsinfo.sell_price,
        // selected:true,
        // thumb_path:this.goodsinfo.img_src,
            this.$store.state.car.forEach(item => {
         
                console.log(item)
                this.goodslist.push(item)
                
             });
             console.log(goodslist)
        },

        remove(id,index){
          //点击删除后有两个地方需要删除一个是store中间仓储中的数据
          //当然删除仓储的同时要把本地储存更新
          //另一个是当前的goodlist中的数据删掉goodslist的意义是直接把眼下的页面数据去除
          this.goodslist.splice(index,1);
          this.$store.commit("removeFormCar",id);
        },
        selectedChanged(id,val){
            //每当单击开关，把最新的状态同步到store中
        this.$store.commit("updateGoodsSelected",{id, selected:val})
        }

        
    },

    components:{
        numbox
    }


}
</script>


<style lang="scss" scoped>
.cart-container {
         background-color: #eee;
         overflow: hidden;
  .goods-list {
        .mui-card-content-inner {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
            }
               img {
             width: 60px;
             height: 60px;
            }
            h1 {
             font-size: 13px;
            }
            .info {
              display: flex;
              flex-direction: column;
              justify-content: space-between;   
              align-items: center;
        
              .price {
                color: red;
                font-weight: bold;
              }
           }
        }
  .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
      color: red;
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>